<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }

  </style>
</head>
<body>
  <div id="app" class="content">
    <div id="example">
      <h1 v-if="ok">YES</h1>
      <h1 v-else>NO</h1>
    </div> 
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

    <h1 v-show="ok">hello!!!!!!!</h1>

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    <button @click="toggleLoginType">Toggle login type</button>
  </div>
  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>   
    var data = {
      ok: true,
      type: 'A',
      loginType: 'username'
    }          
    var app = new Vue({
      el: "#app",
      data: data,
      methods: {
        toggleLoginType: function() {
          return this.loginType = this.loginType === 'username' ? 'email' : 'username';
        }
      }
    });
  </script>
</body>
</html>